<template>
    <div class="person-certificates">
        <div class="person-certificates__content">
            <el-container class="certificates">
                <el-header class="certificates__header">
                    <div class="certificates__header-main">
                        <el-input size="small" clearable v-model="searchKey" placeholder="请输入身份证号码 / 证书编号"
                            class="management__headerInput" style="width: 300px" />
                        <el-button type="primary" style="margin-right: 88px" @click="refresh" size="small">搜索</el-button>
                        <el-button type="success" style="margin-right: 88px" @click="handleAdd" size="small">新增</el-button>

                    </div>
                </el-header>
                <el-main class="certificates__content">
                    <div ref="container" class="table-container">
                        <el-table ref="table" :data="datas" style="width: 100%" align="center" header-align="center">
                            <el-table-column label="姓名" prop="name" />
                            <el-table-column label="性别" prop="gender" width="60px"/>
                            <el-table-column label="身份证号" prop="idNumber" />
                            <el-table-column label="证书名称" prop="certificateName" />
                            <el-table-column label="证书编号" prop="certificateNumber" />
                            <el-table-column label="工作单位" prop="workUnit" />
                            <el-table-column label="职位" prop="position" />
                            <el-table-column label="颁发时间" center>
                                <template slot-scope="scope">
                                    {{ $formatTime (scope.row.createdAt) }}
                                </template>
                            </el-table-column>

                            <el-table-column label="操作" width="120px">
                                <template slot-scope="scope">
                                    <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-main>
                <div class="pagination-container">
                    <el-pagination v-if="total" :current-page="pageNum" :page-size="pageSize"
                        layout="prev, pager, next, total" :total="total" background @current-change="handlePageChange" />
                </div>
            </el-container>
        </div>

        <dialog-edit :visible.sync="visible" v-if="visible" @refresh="refresh" ref="edit"></dialog-edit>
    </div>
</template>
  
<script>
import dialogEdit from "./components/edit.vue"


export default {
    name: "person-certificates",

    components: {
        dialogEdit
    },
    data() {
        return {




            searchKey: "",
            pageNum: 1,
            pageSize: 20,
            total: 0,
            datas: [],
            visible: false,

            cele: []
        };
    },

    mounted() {
        this.handlePageChange(1)
    },

    methods: {

        handlePageChange(pageNum) {
            this.pageNum = pageNum;
            this.fetchDatas();
        },
        async fetchDatas() {
            const loading = this.$loading();
            const params = {
                search: this.searchKey,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
            };
            const { data } = await this.$fetch.get(
                "/api/person-certificates/list",
                params
            );
            this.datas = data.sorts.map((item) => {
                const { article = {}, ...others } = item || {};
                return {
                    ...others,
                    ...article,
                };
            });
            this.total = data.total;
            loading.close();
            this.$nextTick(() => {
                this.$refs.table.bodyWrapper.scrollTop = 0;
            });
        },
        refresh() {
            this.pageNum = 1;
            this.fetchDatas();
        },

        handleAdd() {
            this.visible = true;
            this.$nextTick(() => {
                this.$refs.edit.init()
            })
        },

        handleDelete(items) {
            this.$confirm("是否删除此证书", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(async () => {
                const { code } = await this.$fetch.post(`/api/person-certificates/${items.id}/delete`);
                if (code === 0) {
                    this.$message.success("删除成功");
                    this.refresh();
                }
            }).catch(() => {
                this.refresh();
            });
        },
    },
};
</script>
  
<style scoped lang="scss">
.person-certificates {
    display: flex;
    flex-direction: column;
}

.person-certificates__content {
    display: flex;
    flex-direction: row;

    .content-tree {
        width: 300px;

        .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            font-size: 14px;
            padding-right: 8px;
        }
    }

    .content-table {
        flex: 1;
    }
}

.certificates {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 50px);
    flex: 1;

    .certificates__header {
        display: flex;
        align-items: center;

        .certificates__header-main {
            height: 40px;
            display: flex;
            align-items: center;

            .management__headerInput {
                margin-right: 20px;
            }
        }
    }

    .certificates__content {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: auto;
        padding-bottom: 0;

        .table-container {
            flex: 1;
            overflow: hidden;
            overflow-y: auto;

            .table-container-first {
                display: flex;
                align-items: center;
                justify-content: center;

                .first-content {
                    flex: 1;
                }


            }
        }
    }

    .pagination-container {
        display: flex;
        justify-content: center;
        padding: 10px 0;

        .el-pagination {
            padding: 20px 0;
        }
    }
}

::v-deep .el-table {
    display: flex;
    height: 100%;
    /* overflow: auto; */
    flex-direction: column;

    .el-table__body-wrapper {
        flex: 1;
        overflow-y: auto;
    }

    .cell {
        width: 100%;
        height: 100%;
        padding: 0;
        padding-right: 10px;
    }
}

.text-overflow {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
</style>
  